<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'stuhome' }">查询项目成绩</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="new-box">
            <el-row>
                <el-col :span="12">
                    <div class="probox">
                        <p>班级选择:</p>
                        <el-select v-model="form.xmbjid" @click.native="getbanjilist">
                            <el-option :value="bj.bjid" :label="bj.bjname" v-for=" (bj,i) in banjiList " :key="i" ></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                        <p>项目类别:</p>
                        <el-select v-model="form.xmcategory" @click.native="getcategories">
                             <el-option :value="cate.procode" :label="cate.proname" v-for="(cate,i) in categories" :key="i"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                        <p>名字搜索:</p>
                        <el-input v-model="form.username" style="width:200px"></el-input>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                         <a id="dlink"  style="display:none;"></a>
                        <el-button type="primary" @click="exportExcel('mytable',form.xmbjid,form.xmbjid.toUpperCase()+'-'+form.xmcategory.toUpperCase()+'.xls')">导出Excel</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table
                :data="xmlist"
                style="width:100%;margin-top:20px"
                id="mytable"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号"  type="index"></el-table-column>
                 <el-table-column label="学员" >
                    <template slot-scope="scope">
                        <el-tag effect="dark"  type="danger"> {{scope.row.username}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="班级" >
                    <template slot-scope="scope">
                        <el-tag type="success"> {{scope.row.xmbjname}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" prop="xmname"></el-table-column>
                <el-table-column label="项目地址" >
                    <template slot-scope="scope">
                        <a :href="scope.row.xmlink" target="_blank"  >{{scope.row.xmlink}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="二维码" >
                    <template slot-scope="scope">
                        <img @click="seeBigCode(scope.row.xmlink)" src="../../assets/barcode.png" style="cursor:pointer" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="项目类别" >
                    <template slot-scope="scope">
                        <el-tag  type="primary" > {{scope.row.xmcategorytext}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="项目描述" prop="xmdesc" style="color:#123456"></el-table-column>
                <el-table-column label="项目技术" prop="xmtech"></el-table-column>
                <el-table-column label="难点亮点" prop="xmbug"></el-table-column>
                <el-table-column label="得分" prop="score" sortable >
                    <template slot-scope="scope">
                        <el-tag effect="dark" type="info"  v-if="scope.row.score==0" > 未打分 </el-tag>
                        <el-tag effect="dark" :type="scope.row.score | scoreColor"   v-if="scope.row.score!=0" > {{scope.row.score | scoreLevel}} </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
import {mymixins} from "@/utils"
import {mapState,mapMutations} from "vuex"
export default {
    mixins:[mymixins],
    data(){
        return {
            xmlist:[],
            form:{
                xmcategory:"",
                xmbjid:''
            }
        }
    },
    watch:{
        form:{
            deep:true,
            handler(newVal){
                this.$axios.post("/vue/getallxm",{
                    ...newVal
                })
                .then(res=>{
                    if(res.data.type){
                        this.xmlist =res.data.result;
                    }
                })
            }
        }
    },
    computed:{
        ...mapState(['banjiList','userinfo','categories'])
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            console.log(row.score);
            if (row.score < 60) {
            return 'warning-row';
            } else if (row.score > 90 ) {
            return 'success-row';
            }
            return '';
        },
        ...mapMutations(['changebanjiList','changecategories']),
        getbanjilist(){
            if(this.banjiList.length==0){
                this.$axios.post("/vue/getbanjilist",{
                    xk:this.userinfo.xkid,
                    sch:this.userinfo.schid
                }).then(res=>{
                    if(res.data.type){
                        this.changebanjiList(res.data.result)
                    }
                })
            }
        },
        getcategories(){
            if(this.categories.length==0){    // vuex 临时缓存 
                this.$axios.post("/vue/getpronamelist",{
                    xkid:this.userinfo.xkid
                })
                .then(res=>{
                    if(res.data.type){
                        this.changecategories(res.data.result)
                    }
                })
            }
        },
        exportExcel(table, name, filename){
            if(this.form.xmbjid&&this.form.xmcategory){
                var uri = 'data:application/vnd.ms-excel;base64,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
                format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    
                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }else{
                this.$message.error("请选择班级和项目后导出!")
            }
        }
    },
    mounted(){
        this.$axios.post("/vue/getallxm")
        .then(res=>{
            if(res.data.type){
                this.xmlist =res.data.result;
            }
        })
    }
}
</script>


<style >
.probox{
    display:flex;
    margin-top:20px;
    /* justify-content: center; */
    align-items: center;
}
.probox p{
    padding:0 5px;
}

</style>

